<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小橘子后台管理系统</title>
</head>

<body>
  <!-- 加载动画容器 -->
  <div id="app-loading"></div>

  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>


<style>
  /* 高级双环加载动画 */
  #app-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #f0f2f5 0%, #e5e8ec 100%);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-in-out;
  }

  #app-loading::before,
  #app-loading::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    animation: spin 2s linear infinite;
  }

  #app-loading::before {
    width: 80px;
    height: 80px;
    border: 4px solid transparent;
    border-top-color: #409eff;
    border-bottom-color: #409eff;
    background-image: linear-gradient(45deg, #409eff, #79bbff);
    animation:
      spin 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite,
      pulse 2s ease-in-out infinite alternate;
  }

  #app-loading::after {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(255, 255, 255, 0.8);
    border-top-color: transparent;
    border-bottom-color: transparent;
    animation: spinReverse 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg) scale(1.1);
      box-shadow: 0 0 20px rgba(64, 158, 255, 0.2);
    }
  }

  @keyframes spinReverse {
    to {
      transform: rotate(-360deg) scale(0.9);
    }
  }

  @keyframes pulse {
    from {
      filter: drop-shadow(0 0 5px #409eff);
    }

    to {
      filter: drop-shadow(0 0 15px #79bbff);
    }
  }
</style>

</html>